import React, {Component} from 'react';
import axios from 'axios';
import {Form, Icon, Input, Button} from 'antd';
const FormItem = Form.Item;
function hasErrors(fieldsError) {
    return Object
        .keys(fieldsError)
        .some(field => fieldsError[field]);
}
class Login extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this
            .handleSubmit
            .bind(this);
        // 设置 initial state this.state = {     selects: [],     columns: [],     data:
        // [],     visible: false,     visible1: false };
    }
    componentDidMount() {
        this
            .props
            .form
            .validateFields();
    }
    handleSubmit(e) {
        e.preventDefault();
        this
            .props
            .form
            .validateFields((err, values) => {
                if (!err) {
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:7952/Get/Token",
                        data: {
                            username: values.userName,
                            password: values.password,
                            grant_type: 'password'
                        },
                        dataType: "json",
                        success: function (data) {
                            var my = JSON.stringify(data);
                            $.cookie('token', my, {path: '/'});
                            axios.defaults.headers.common['Authorization'] = "Bearer " + data.access_token;
                            window.location.href = 'http://localhost:8080/#/AdminHome/Welcome';
                        },
                        error: function (msg) {
                            alert("账号或者密码错误");
                        }
                    });

                }
            });
    }
    render() {
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 30
            }
        };
        const userNameError = isFieldTouched('userName') && getFieldError('userName');
        const passwordError = isFieldTouched('password') && getFieldError('password');
        return (
            <div className="login-box">
                <div className="login-logo">
                    <a href="#">
                        <b>Stage</b>问卷调查后台</a>
                </div>
                <div className="login-box-body">
                    <p className="login-box-msg">输入账号密码登陆</p>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            validateStatus={userNameError
                            ? 'error'
                            : ''}
                            help={userNameError || ''}>
                            {getFieldDecorator('userName', {
                                rules: [
                                    {
                                        type: 'email',
                                        message: 'The input is not valid E-mail!'
                                    }, {
                                        required: true,
                                        message: 'Please input your username!'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={< Icon type = "user" style = {{ fontSize: 13 }}/>}
                                    placeholder="Username"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            validateStatus={passwordError
                            ? 'error'
                            : ''}
                            help={passwordError || ''}>
                            {getFieldDecorator('password', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your Password!'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={< Icon type = "lock" style = {{ fontSize: 13 }}/>}
                                    type="password"
                                    placeholder="Password"/>
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
                                Log in
                            </Button>
                        </FormItem>
                    </Form>
                    <div className="social-auth-links text-center">
                        <p>- OR -</p>
                        <a href="#" className="btn btn-block btn-social btn-facebook btn-flat">
                            <i className="fa fa-facebook"></i>
                            Facebook 账号登陆</a>
                        <a href="#" className="btn btn-block btn-social btn-google btn-flat">
                            <i className="fa fa-google-plus"></i>
                            Google+ 账号登陆</a>
                    </div>
                    <a href="#">忘记密码</a><br/>
                    <a href="register.html" className="text-center">新用户注册</a>
                </div>
            </div>
        )
    }
};
const LoginForm = Form.create()(Login);
export default LoginForm;